<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>直播列表</title>
  <link rel="stylesheet" type="text/css" href="<%=path %>/style/easyui.css">
  <link rel="stylesheet" type="text/css" href="<%=path %>/style/icon.css">
  <link rel="stylesheet" type="text/css" href="<%=path %>/style/neweasyui/themes/gray/panel.css">
  <link rel="stylesheet" type="text/css" href="<%=path %>/style/neweasyui/themes/gray/window.css">
  <script type="text/javascript" src="<%=path %>/script/1.11.1.js"></script>
  <script type="text/javascript" src="<%=path %>/script/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="<%=path %>/script/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="<%=path %>/script/dateFormat.js"></script>
  <script type="text/javascript" src="<%=path %>/script/datagrid-bufferview.js"></script>
  <script type="text/javascript" src="<%=path %>/script/common.js"></script>
  <style type="text/css">
    #fm{
      margin:0;
      padding:10px 30px;
    }
    .ftitle{
      font-size:14px;
      font-weight:bold;
      padding:5px 0;
      margin-bottom:10px;
      border-bottom:1px solid #ccc;
    }
    .fitem{
      margin-bottom:17px;
    }
    .fitem label{
      display:inline-block;
      width:80px;
    }
    .fitem input{
      width:230px;
    }
  </style>
</head>
<body>
<table id="tt" title="直播列表" style="width:auto;height:500px">
</table>
<div id="toolbar" style="padding:5px;height:auto">
  <div>
    <!-- 搜索条件结束 -->
    <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="newLive()">添加</a>&nbsp;
    <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-edit" onclick="editLive()">修改</a>&nbsp;

  </div>
</div>

<!-- 添加/编辑框 开始-->
<div id="dlg" class="easyui-dialog"
     style="width: 500px; height: 450px; padding: 10px 20px" closed="true"
     buttons="#dlg-buttons">
  <div class="ftitle">直播信息</div>
  <form id="fm" method="post"  validate>
    <input type="hidden" name="id" id="id" />

    <div class="fitem">
      <label>直播名称:</label>
      <input  class="easyui-textbox" name="liveTitle" id="live_title" />
    </div>

    <div class="fitem">
      <label>直播ID:</label>
      <input  class="easyui-textbox" name="liveId" id="live_id" />
    </div>
    <div class="fitem">
      <label>开始时间:</label>
      <input class="easyui-datetimebox" name="startTime" id="start_date" />
    </div>
    <div class="fitem">
      <label>结束时间:</label>
      <input class="easyui-datetimebox" name="endTime" id="end_date" />
    </div>
  </form>
</div>
<div id="dlg-buttons">
  <a href="javascript:void(0)" class="easyui-linkbutton c6"
     iconCls="icon-ok" onclick="saveOrUpdateLive()" style="width: 90px">Save</a> <a
        href="javascript:void(0)" class="easyui-linkbutton"
        iconCls="icon-cancel" onclick="closeDialog()"
        style="width: 90px">Cancel</a>
</div>
<!-- 添加/编辑框结束-->



</body>
<script type="text/javascript">
  var class_id,course_id,gate_id;
  $.ajaxSetup({cache:false});
  $(function(){
    $('#tt').datagrid({
      url:'<%=basePath %>service/live/list',
      method:'get',
      singleSelect:true,toolbar:'#toolbar',remoteSort:false,pageSize:50,nowrap:false,
      fitColumns:true,
      pagination:true,
      columns:[[
        {field:'id',title:'ID',sortable:true,width:15},
        {field:'liveTitle',title:'标题',sortable:true,width:60},
        {field:'liveId',title:'直播ID',sortable:true,width:60},
        {field:'startTime',title:'开始时间',sortable:true,width:80,formatter:Common.DateFormatterTime},
        {field:'endTime',title:'结束时间',sortable:true,width:80,formatter:Common.DateFormatterTime},
        {field:'status',title:'状态',sortable:true,width:50,
          formatter: function(value,row,index){
            var str="" ;
            if(value==0){
              str="未开始";
            }else if(value==1){
              str="直播中";
            }else if(value==2){
              str="已结束";
            }
            return str;
          }
        }

      ]]
    });

  });

  //日期格式化
  
  
  //关闭弹出框
  function closeDialog(){
    $('#dlg').dialog('close') ;
  }

  //添加直播
  function newLive(){
    $('#dlg').dialog('open').dialog('setTitle','添加直播');
    $('#fm').form('clear');
    url = '<%=basePath%>service/live/add';
  }

  function editLive(){
    url = '<%=basePath%>service/live/edit';
    var row = $('#tt').datagrid('getSelected');
    if (row){
      $("#id").val(row.id);
      $("#live_title").textbox('setValue',row.liveTitle);
      $("#live_id").textbox('setValue',row.liveId);
      var start_date = row.startTime;
      var end_date = row.endTime;
      var startdate = new Date(start_date);
      var enddate = new Date(end_date);
      $("#start_date").datetimebox('setValue',formatter(startdate));
      $("#end_date").datetimebox('setValue',formatter(enddate));
      $('#dlg').dialog('open').dialog('setTitle','编辑直播信息');
    }
  }

  function formatter(date){ 
	  return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+
	      " "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
	  }
  //添加或修改直播
  function saveOrUpdateLive(){

    $('#fm').form('submit', {
      url : url,
      onSubmit : function() {
        return $(this).form('validate');
      },
      success : function(result) {

        if (result.status) {
          $.messager.show({
            title : 'Error',
            msg : '服务器出错，请稍后再试'
          });
        } else {
          $('#dlg').dialog('close'); // close the dialog
          $('#tt').datagrid('reload'); // reload the data
        }
      }
    });
  }


</script>
</html>
